<!--评估任务 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="task_top mb20">
          <div class="task_top_1">
            <p><svg-icon icon-class="peoples" /> {{detailData.evaluateQuestTitle}}</p>
            <span v-if="detailData.evaluateQuestContent">（描述：{{detailData.evaluateQuestContent}}）</span>
          </div>
          <div class="task_top_2">
            <span>业务：{{detailData.evaluateQuestBusiness}}</span>
            <span>评估任务：{{detailData.evaluateQuestIndexSum}}项</span>
            <span>评估周期：{{detailData.evaluateQuestCycle}}  <span v-if="detailData.evaluateQuestTriggerMonth"></span> （每月{{detailData.evaluateQuestTriggerMonth}}号{{detailData.evaluateQuestTriggerHours}}分）</span>
            <span v-if="detailData.startTime">开始时间：{{parseTime(detailData.startTime)}}</span>
            <span v-if="detailData.evaluateExpertNames">评估人员：{{detailData.evaluateExpertNames}}</span>
          </div>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="8" class="fl">
<!--            <div>-->
<!--              <el-upload action=""  :file-list="fileList" :show-file-list="false"  ref="upload" multiple auto-upload :http-request="uploadFile"  class="upload-demo">-->
<!--                <el-button size="small" type="primary" icon="el-icon-upload">评估报告上传</el-button>-->
<!--              </el-upload>-->
<!--              <div class="ul" v-if="detailData.zhpgEvaluateTemplateList && detailData.zhpgEvaluateTemplateList.length > 0">-->
<!--                <div class="li" v-for="(item,index) in detailData.zhpgEvaluateTemplateList" :key="index" style="display: flex;width: 500px;justify-content: space-between;align-items: center">-->
<!--                  <p>{{item.evaluateTemplateTitle}}</p>-->
<!--                  <div>-->
<!--                    <el-button @click="handleFile('del',item)"  type="primary" plain icon="el-icon-delete" size="mini">删除</el-button>-->
<!--                    <el-button @click="handleFile('down',item)"  type="primary" plain icon="el-icon-download" size="mini">下载</el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </el-col>
          <el-col :span="1.5" class="fr">
            <el-button type="primary" plain size="mini" @click="commit">提交</el-button>
          </el-col>
          <el-col :span="1.5" class="fr">
            <el-button type="primary" size="mini" @click="open = true">填写问题/风险</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableList" border>
          <el-table-column label="序号" width="50" align="center" type="index" />
          <el-table-column label="评估指标名称" align="center"  prop="evaluateIndexName" />
          <el-table-column label="指标值" align="center"  prop="evaluateIndexZdz" />
          <el-table-column label="是否专家评分" align="center"  prop="evaluateIndexIszj">
<!--            <template slot-scope="scope">-->
<!--              <el-select v-if="scope.row.evaluateIndexIszj === '是'">-->
<!--                <el-option value="是" label="是"></el-option>-->
<!--                <el-option value="否" label="否"></el-option>-->
<!--              </el-select>-->
<!--              <span v-else>{{scope.row.evaluateIndexIszj}}</span>-->
<!--            </template>-->
          </el-table-column>
          <el-table-column align="center" label="专家评分值">
            <template slot-scope="scope">
              <span v-if="scope.row.evaluateIndexIszj === '否'">{{scope.row.evaluateExpertSubContent}}</span>
              <span v-else>
                 <el-input v-model="scope.row.evaluateExpertSubContent" placeholder="请输入评分内容"></el-input>
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div  style="height: 50px;display: flex;align-items: center;justify-content: center;">
          <!--          @current-change="onPageChange"-->
          <el-pagination :page-size="queryParams.pageSize" background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 填写风险对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-suffix="：">
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务">
              <span>{{detailData.evaluateQuestBusiness}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="目标政策">
              <span>{{detailData.evaluateQuestCorePolicy}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提交人">
              <span>{{userInfo.nickName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别" prop="evaluateRiskType">
              <el-select v-model="form.evaluateRiskType" clearable filterable placeholder="请选择类别">
                <el-option v-for="(item,index) in sendOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险名称" prop="evaluateRiskName">
              <el-input v-model="form.evaluateRiskName" placeholder="请输入风险名称" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险详细" prop="evaluateRiskContent">
              <el-input type="textarea" v-model="form.evaluateRiskContent" placeholder="请输入风险详细" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="专家建议"  prop="evaluateRiskZjjy">
              <el-input type="textarea" v-model="form.evaluateRiskZjjy" placeholder="请输入专家建议"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDange, queryDetailQuest, expertPageList, riskType, zjCommit, uploadFileInter, downLoadInter, delFile } from '@/api/eval'
import { closeLoading, openLoading, openMessage } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  name: "task2",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  data() {
    return {
      search:'',
      fileList:[],
      total: 0,
      title: "问题/风险 情况填写",
      // 是否显示弹出层
      open: false,
      //数据
      tableList: [],
      loading:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        hsitoryQuestId:'',
        userId:'',
      },
      rolesStr:'',
      detailData: {}, //详情
      form: {
        evaluateRiskBusiness:'',//业务
        evaluateQuestId:'',//评估任务表ID
        evaluateRiskName:'',//风险名称
        evaluateRiskContent:'',//风险详细
        evaluateRiskMbzc:'',//目标政策
        evaluateRiskZjjy:'',//专家/组长建议
        evaluateRiskType:'',//问题/风险类型&字典
        evaluateRiskSubId:'',//提交人ID
        evaluateRiskSubName:'',//提交人名称
      },
      rules: {
        evaluateRiskType:[{required:true,message:'请选择类别',trigger:'blur'}],
        evaluateRiskName:[{required:true,message:'请输入风险名称',trigger:'blur'}],
        evaluateRiskContent:[{required:true,message:'请输入风险详细',trigger:'blur'}],
        evaluateRiskZjjy:[{required:true,message:'请输入专家/组长建议',trigger:'blur'}],
      },
      sendOptions:[],
    }
  },
  created() {
    this.rolesStr = this.roles[0]
    riskType().then((res) => {
      this.sendOptions = res.data
    })
  },
  computed:{
    ...mapGetters(['roles','userInfo'])
  },
  mounted() {
    let {hsitoryQuestId,id} = this.$route.query
    this.queryParams.hsitoryQuestId = hsitoryQuestId
    this.queryParams.userId = id
    this.form.evaluateQuestId = id
    this.form.evaluateRiskSubName = this.userInfo.nickName
    this.form.evaluateRiskSubId = this.userInfo.userId
    if (id && hsitoryQuestId) {
      openLoading()
      this.queryDetail()
      this.queryList()
      closeLoading()
    }
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },
    queryDetail() {
      queryDetailQuest(this.queryParams.userId).then(res => {
        if (res.code === 200) {
          this.detailData = res.data
          console.log('this.detailData',this.detailData)
          this.form.evaluateRiskMbzc = res.data.evaluateQuestCorePolicy
          this.form.evaluateRiskBusiness = res.data.evaluateQuestBusiness
        }
      })
    },
    // handleFile(type,item) {
    //   switch (type) {
    //     case 'del' :
    //       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         delFile(item.id).then(res => {
    //
    //           this.$message({
    //             type: 'success',
    //             message: '删除成功!'
    //           });
    //           this.queryDetail()
    //         })
    //       }).catch(() => {
    //         this.$message({
    //           type: 'info',
    //           message: '已取消删除'
    //         });
    //       });
    //       break;
    //     case 'down':
    //       downLoadInter(item.id).then(result => {
    //         //创建一个Blob对象接收后端传来的文件流
    //         const blob = new Blob([result], {
    //           type: 'application/octet-stream'
    //         })
    //         const downloadElement = document.createElement('a')
    //         // 创建下载的链接
    //         const href = window.URL.createObjectURL(blob)
    //         downloadElement.href = href
    //         // 下载后文件名
    //         downloadElement.download = item.evaluateTemplateTitle
    //         document.body.appendChild(downloadElement)
    //         // 点击下载
    //         downloadElement.click()
    //         // 下载完成移除元素
    //         document.body.removeChild(downloadElement)
    //         // 释放掉blob对象
    //         window.URL.revokeObjectURL(href)
    //       })
    //       break;
    //   }
    // },
    // uploadFile(raw) {
    //   let fd = new FormData()
    //   fd.append('evaluateQuestId',this.$route.query.id)
    //   fd.append('file',raw.file)
    //   uploadFileInter(fd).then(({data}) => {
    //     openMessage('上传成功','success')
    //     this.queryDetail()
    //   })
    // },
    queryList() {
      expertPageList(this.queryParams).then((res) => {
        res.rows.forEach((item,index) => {
          item['indexId'] = item.id
          item['historyQuestId'] = this.$route.query.hsitoryQuestId
          item.evaluateExpertUserId = this.$route.query.id
        })
        this.tableList = res.rows
        this.total = res.total
      }).catch(err => {
        this.loading = false
      })
    },
    // 提交
    commit() {
      let list = JSON.parse(JSON.stringify(this.tableList))
      list.forEach((item) => {
        if (item.id) {
          delete item.id
          delete item.hsitoryQuestId
        }
      })
      zjCommit(list).then((res) => {
        if (res.code === 200) {
          openMessage('提交成功','success')
          setTimeout(()=>{
            this.$router.back()
          },1500)
        }else {
          openMessage('提交失败','error')
        }
      })
    },
    // 提交问题风险
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addDange(this.form).then((res) => {
            if (res.code === 200) {
              openMessage('新增问题/风险成功','success')
              this.$refs.form.resetFields()
              setTimeout(() => {
                this.cancel()
              },1500)
            }else {
              openMessage('新增失败','error')
            }
          })
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: #354161;
  padding-bottom: 20px;
}

//::v-deep .el-dialog__footer {
//  background-color: #f1f2f4;
//  padding-top: 20px;
//}

::v-deep .el-dialog__title {
  color: white;
}

::v-deep .czlialog {
  margin-top: 20vh;
}

.flex-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-container {
  width: 80%;
}

.info-row {
  height: 40px;
}

.flex-row {
  display: flex;
  align-items: center;
}

.label {
  width: 30%;
  text-align: right;
  margin-right: 10px;
  font-weight: 900;
}

.value {
  width: 70%;
}

/* Assuming el-input is a custom component, you might need additional styling */
.input-field {
  width: 70%;
}

/* 头部 */
.task_top {
  height: 150px;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  padding: 20px;
}

.task_top_1 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.task_top_1 p {
  font-size: 20px;
  color: rgb(40, 121, 228);
  font-family: "微软雅黑";
  font-weight: bold;
}

.task_top_1 span {
  font-size: 15px;
  color: #bbb;
  font-family: "微软雅黑";
  margin-left: 20px;
  transform: translateY(3px);
}

.task_top_2 {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 15px;
}

::v-deep .el-select.el-select--medium {
  width: 100%;
}

::v-deep .blue label {
  color: blue;
}
</style>
